<template>
  <h1>文本相关指令</h1>
  <!-- 插值指令:将此处显示的文本与变量进行绑定,修改变量的值,页面文本随之改变 -->
  <p>{{ info }}</p>
  <h3>{{info}}</h3>
  <h1>{{info}}</h1>
  <!-- 响应式变量的值也可以拼接 -->
  {{info+'早上好!'}}
  <hr>
  <!-- 给按钮绑定一个点击事件 -->
  <button @click="f()">我是按钮</button>
  <hr>
  <p v-text="info"></p>
  <p v-html="info"></p>
</template>
<script setup>
import {ref} from "vue";
//响应式变量
const info = ref("测试文本");

const f = ()=>{ //箭头函数 固定写法 (参数列表)=>{方法体}
  info.value='值变了!';//在JS中使用响应式变量的值,必须 .value!!!
  info.value='值<b>更新</b>了!';
}
</script>

<style scoped>

</style>